<script lang="ts" setup>
import { useSidebarColSpan } from '@/hooks';
import { Comment, Fragment, VNode, VNodeArrayChildren } from 'vue';

const gutter = 20
const cssVar = {
  gutter: px(gutter)
}
function px(val: number) { return val + 'px' }
function getVnodes(vNodes: VNode[]) {
  return vNodes.reduce((vNodes, vNode) => {
    if (vNode.type === Comment) {
      return vNodes
    }
    if (vNode.type === Fragment) {
      const { children } = vNode
      vNodes.push(...children as VNodeArrayChildren)
      return vNodes
    }
    vNodes.push(vNode)
    return vNodes
  }, [] as any[])
}

const colSpan = useSidebarColSpan()

</script>

<template>
  <el-row :gutter="gutter" class="has-gutter">
    <el-col :span="colSpan" v-for="slot in getVnodes($slots.default?.() || [])">
      <component :is="slot" />
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped >
.has-gutter {
  height: calc(100vh - 160px);
  overflow-y: auto;

  .el-col {
    padding: calc(v-bind('cssVar.gutter') / 2)
  }
}
</style>